<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html>
	<head>
		<meta charset="utf-8">
		<title>美食区</title>
		<!--移动设备优先-->
		<meta name="viewport" content="width=device-width,initial-scale=1,sharing-to-fit=no">
		
		<!--引入Bootstrap CSS-->
		<link rel="stylesheet" th:href="@{/css/bootstrap.css}">
<!--		<link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap-icons.css} "/>-->

		<!-- 引入CSS Swiper插件 -->
		<link rel="stylesheet" th:href="@{/css/swiper.min.css}">

		<!--引入手风琴CSS-->
		<link rel="stylesheet" th:href="@{/css/style.css}">

		<!--引入 Dplayer css-->
		<link rel="stylesheet" th:ref="@{/css/DPlayer.min.css}">

		<!--新加入-->
		<link rel="stylesheet" type="text/css" th:href="@{/css/demo.css}">

		<link th:href="@{/css/bootstrap-popover-x.css}" media="all" rel="stylesheet" type="text/css" />

		<script type="text/javascript">
			function login() {
				top.window.location.href="/login.html"
			}
			function register() {
				top.window.location.href="/register.html"
			}
			function index() {
				top.window.location.href="/index.html"
			}
			function fan() {
				top.window.location.href="/findAllFan"
			}
			function search() {
				let vname = $("#mysearch").val();
				top.window.location.href = "/findAllVideo3/"+vname
			}
			function space(){
				let uid = $("span[name=1]").attr("id")
				//top.window.location.href="/findUserById/"+ uid
				location.href="/findUserById/"+ uid
			}
			function space2(){
				let uid = $("span[name=1]").attr("id")
				top.window.location.href="/findUserById2/"+ uid
			}
			function cancellation(){
				top.window.location.href="/cancellation"
			}
			function history(){
				let uid = $("span[name=1]").attr("id")
				top.window.location.href="/findAllHisByUid/"+uid
			}
		</script>

		<style>
			.user{
				width:30px;
				height:30px;
				border-radius: 50%;
				border: #000000 1px solid;
			}
			.blo{
				width: 160px;
				height: 125px;
				border: #000000 1px sollid;
				border-radius: 3%;
			}
			
			.pho{
				width: 155px;
				height: 100px;
				border: #000000 1px sollid;
				border-radius: 3%;
			}
			
		</style>
		
	</head>
	<body>
		<!--导航栏开始-->
<!--		<iframe th:src="@{/navigation/navigationBar.html}"-->
<!--				frameBorder="0" width="100%" scrolling="no" height="70px"></iframe>-->
		<div th:insert="~{navigation/navigationBar::navi}"></div>
		<!--导航栏结束-->

		<!--头部开始-->
		<iframe th:src="@{/navigation/header.html}"
				frameBorder="0" width="100%" scrolling="no" height="120px"></iframe>
		<!--头部结束-->
		
		<!--轮播图+推荐开始-->
		<section class="mt-4">
			<div class="container">
				<div class="row">
					<div class="col-sm-12 col-md-8">
						<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
						  <ol class="carousel-indicators">
						    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
						    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
						    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
						  </ol>
						  <div class="carousel-inner">
						    <div class="carousel-item active">
						      <img th:src="@{/img/vlunbo01.png}" class="d-block w-100" alt="...">
						    </div>
						    <div class="carousel-item">
						      <img th:src="@{/img/vlunbo02.png}" class="d-block w-100" alt="...">
						    </div>
						    <div class="carousel-item">
						      <img th:src="@{/img/vlunbo03.png}" class="d-block w-100" alt="...">
						    </div>
						  </div>
						  <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
						    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
						    <span class="sr-only">Previous</span>
						  </a>
						  <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
						    <span class="carousel-control-next-icon" aria-hidden="true"></span>
						    <span class="sr-only">Next</span>
						  </a>
						</div>
					</div>
					
					<div class="col-sm-12 col-md-4 d-md-block ml-auto">
						<div class="card-deck">
							<span th:each="video,itemStat:${allVideo}">
								<span th:if="${itemStat.count}<5">
									<div class="blo ml-4 mb-2">
										<img th:src="@{/vimg/}+${video.vid}+@{.png}" class="pho" >
										<span th:if="${video.vname.length()>10}">
											<p><a th:href="@{/findVideoByVname/}+${video.vid}+@{/true}"><smalll th:text="${video.vname.substring(0,9)}+..."></smalll></a></p>
										</span>
										<span th:unless="${video.vname.length()>10}">
											<p><a th:href="@{/findVideoByVname/}+${video.vid}+@{/true}"><smalll th:text="${video.vname}"></smalll></a></p>
										</span>
									</div>
								</span>
							</span>
						</div>
					</div>
				</div>
			</div>
		</section>
		<!--轮播图+推荐结束-->

		<!--前方高能板块开始-->
		<section class="mt-4">
			<div class="container">
				<div class="row">
					<div class="col-sm-12 col-md-12">
						<div class="card-deck">
							<span th:each="video,itemStat:${allVideo}">
								<span th:if="${itemStat.count}<10">
									<span th:if="4<${itemStat.count}">
										<div class="blo mx-3 my-2">
											<img th:src="@{/vimg/}+${video.vid}+@{.png}" class="pho" >
											<span th:if="${video.vname.length()>10}">
												<p><a th:href="@{/findVideoByVname/}+${video.vid}+@{/true}"><smalll th:text="${video.vname.substring(0,9)}+..."></smalll></a></p>
											</span>
											<span th:unless="${video.vname.length()>10}">
												<p><a th:href="@{/findVideoByVname/}+${video.vid}+@{/true}"><smalll th:text="${video.vname}"></smalll></a></p>
											</span>
										</div>
									</span>
								</span>
								<span th:if="${itemStat.count}<11">
									<span th:if="9<${itemStat.count}">
										<div class="blo mx-2 my-2">
											<img th:src="@{/vimg/}+${video.vid}+@{.png}" class="pho" >
											<span th:if="${video.vname.length()>10}">
												<p><a th:href="@{/findVideoByVname/}+${video.vid}+@{/true}"><smalll th:text="${video.vname.substring(0,9)}+..."></smalll></a></p>
											</span>
											<span th:unless="${video.vname.length()>10}">
												<p><a th:href="@{/findVideoByVname/}+${video.vid}+@{/true}"><smalll th:text="${video.vname}"></smalll></a></p>
											</span>
										</div>
									</span>
								</span>
							</span>
						</div>
					</div>
				</div>
			</div>
		</section>
		<!--前方高能板块结束-->
		
		<!--美食制作开始-->
		<section class="mt-4">
			<div class="container">
				<div class="row">
					<div class="col-sm-12 col-md-8">
						<div class="card-header" style="background-color: white;">
							<h4 class="d-inline-block">🍳美食制作</h4>
							<a class="btn btn-outline-dark ml-4 float-md-right d-inline-block" href="#" role="button">换一换</a>
							<a class="btn btn-outline-dark ml-4 float-md-right d-inline-block" href="#" role="button">更多</a>	
						</div>
						
						<div class="card-deck">
							<span th:each="video,itemStat:${allVideo}">
								<span th:if="${itemStat.count}<14">
									<span th:if="10<${itemStat.count}">
										<div class="blo mx-3 my-2">
											<img th:src="@{/vimg/}+${video.vid}+@{.png}" class="pho" >
											<span th:if="${video.vname.length()>10}">
												<p><a th:href="@{/findVideoByVname/}+${video.vid}+@{/true}"><smalll th:text="${video.vname.substring(0,9)}+..."></smalll></a></p>
											</span>
											<span th:unless="${video.vname.length()>10}">
												<p><a th:href="@{/findVideoByVname/}+${video.vid}+@{/true}"><smalll th:text="${video.vname}"></smalll></a></p>
											</span>
										</div>
									</span>
								</span>
								<span th:if="${itemStat.count}<15">
									<span th:if="13<${itemStat.count}">
										<div class="blo mx-2 my-2">
											<img th:src="@{/vimg/}+${video.vid}+@{.png}" class="pho" >
											<span th:if="${video.vname.length()>10}">
												<p><a th:href="@{/findVideoByVname/}+${video.vid}+@{/true}"><smalll th:text="${video.vname.substring(0,9)}+..."></smalll></a></p>
											</span>
											<span th:unless="${video.vname.length()>10}">
												<p><a th:href="@{/findVideoByVname/}+${video.vid}+@{/true}"><smalll th:text="${video.vname}"></smalll></a></p>
											</span>
										</div>
									</span>
								</span>
								<span th:if="${itemStat.count}<18">
									<span th:if="14<${itemStat.count}">
										<div class="blo mx-3 my-2">
											<img th:src="@{/vimg/}+${video.vid}+@{.png}" class="pho" >
											<span th:if="${video.vname.length()>10}">
											<p><a th:href="@{/findVideoByVname/}+${video.vid}+@{/true}"><smalll th:text="${video.vname.substring(0,9)}+..."></smalll></a></p>
											</span>
											<span th:unless="${video.vname.length()>10}">
												<p><a th:href="@{/findVideoByVname/}+${video.vid}+@{/true}"><smalll th:text="${video.vname}"></smalll></a></p>
											</span>
										</div>
									</span>
								</span>
								<span th:if="${itemStat.count}<19">
									<span th:if="17<${itemStat.count}">
										<div class="blo mx-2 my-2">
											<img th:src="@{/vimg/}+${video.vid}+@{.png}" class="pho" >
											<span th:if="${video.vname.length()>10}">
												<p><a th:href="@{/findVideoByVname/}+${video.vid}+@{/true}"><smalll th:text="${video.vname.substring(0,9)}+..."></smalll></a></p>
											</span>
											<span th:unless="${video.vname.length()>10}">
												<p><a th:href="@{/findVideoByVname/}+${video.vid}+@{/true}"><smalll th:text="${video.vname}"></smalll></a></p>
											</span>
										</div>
									</span>
								</span>
							</span>
							
						</div>
						
					</div>
					<div class="col-sm-12 col-md-4">
						<div class="card-header" style="background-color: white;">
							<h4 class="d-inline-block">🔥热门</h4>
							<a class="btn btn-outline-dark float-md-right" href="#" role="button">更多</a>
						</div>
						<div class="card border-0" >
						  <ul class="list-group list-group-flush">
						    <li class="list-group-item"><span class="badge badge-info mr-2">1</span>
							<small>Dapibus ac facilisis inDapibus ac facilisis in</small></li>
						    <li class="list-group-item"><span class="badge badge-info mr-2">2</span>
							<small>Dapibus ac facilisis inDapibus ac facilisis in</small></li>
						    <li class="list-group-item"><span class="badge badge-info mr-2">3</span>
							<small>Vestibulum Vestibulum at eros at eros</small></li>
							<li class="list-group-item"><span class="badge badge-secondary mr-2">4</span>
							<small>Vestibulum Vestibulum at eros at eros</small></li>
							<li class="list-group-item"><span class="badge badge-secondary mr-2">5</span>
							<small>Vestibulum Vestibulum at eros at eros</small></li>
							<li class="list-group-item"><span class="badge badge-secondary mr-2">6</span>
							<small>Vestibulum Vestibulum at eros at eros</small></li>
						  </ul>
						</div>
						
					</div>
				</div>
			</div>
		</section>
		<!--美食制作结束-->
		
		<!--美食侦探开始-->
		<section class="mt-4">
			<div class="container">
				<div class="row">
					<div class="col-sm-12 col-md-8">
						<div class="card-header" style="background-color: white;">
							<h4 class="d-inline-block">🔎美食侦探</h4>
							<a class="btn btn-outline-dark ml-4 float-md-right" href="#" role="button">换一换</a>
							<a class="btn btn-outline-dark ml-4 float-md-right"  href="#" role="button">更多</a>
						</div>
						<div class="card-deck">
							<span th:each="video,itemStat:${allVideo}">
								<span th:if="${itemStat.count}<22">
									<span th:if="18<${itemStat.count}">
										<div class="blo mx-3 my-2">
											<img th:src="@{/vimg/}+${video.vid}+@{.png}" class="pho" >
											<span th:if="${video.vname.length()>10}">
												<p><a th:href="@{/findVideoByVname/}+${video.vid}+@{/true}"><smalll th:text="${video.vname.substring(0,9)}+..."></smalll></a></p>
											</span>
											<span th:unless="${video.vname.length()>10}">
												<p><a th:href="@{/findVideoByVname/}+${video.vid}+@{/true}"><smalll th:text="${video.vname}"></smalll></a></p>
											</span>
										</div>
									</span>
								</span>
								<span th:if="${itemStat.count}<23">
									<span th:if="21<${itemStat.count}">
										<div class="blo mx-2 my-2">
											<img th:src="@{/vimg/}+${video.vid}+@{.png}" class="pho" >
											<span th:if="${video.vname.length()>10}">
												<p><a th:href="@{/findVideoByVname/}+${video.vid}+@{/true}"><smalll th:text="${video.vname.substring(0,9)}+..."></smalll></a></p>
											</span>
											<span th:unless="${video.vname.length()>10}">
												<p><a th:href="@{/findVideoByVname/}+${video.vid}+@{/true}"><smalll th:text="${video.vname}"></smalll></a></p>
											</span>
										</div>
									</span>
								</span>
								<span th:if="${itemStat.count}<26">
									<span th:if="22<${itemStat.count}">
										<div class="blo mx-3 my-2">
											<img th:src="@{/vimg/}+${video.vid}+@{.png}" class="pho" >
											<span th:if="${video.vname.length()>10}">
												<p><a th:href="@{/findVideoByVname/}+${video.vid}+@{/true}"><smalll th:text="${video.vname.substring(0,9)}+..."></smalll></a></p>
											</span>
											<span th:unless="${video.vname.length()>10}">
												<p><a th:href="@{/findVideoByVname/}+${video.vid}+@{/true}"><smalll th:text="${video.vname}"></smalll></a></p>
											</span>
										</div>
									</span>
								</span>
								<span th:if="${itemStat.count}<27">
									<span th:if="25<${itemStat.count}">
										<div class="blo mx-2 my-2">
											<img th:src="@{/vimg/}+${video.vid}+@{.png}" class="pho" >
											<span th:if="${video.vname.length()>10}">
												<p><a th:href="@{/findVideoByVname/}+${video.vid}+@{/true}"><smalll th:text="${video.vname.substring(0,9)}+..."></smalll></a></p>
											</span>
											<span th:unless="${video.vname.length()>10}">
												<p><a th:href="@{/findVideoByVname/}+${video.vid}+@{/true}"><smalll th:text="${video.vname}"></smalll></a></p>
											</span>
										</div>
									</span>
								</span>
							</span>
						</div>
					</div>
					<div class="col-sm-12 col-md-4">
						<div class="card-header" style="background-color: white;">
							<h4 class="d-inline-block">🔥热门</h4>
							<a class="btn btn-outline-dark float-md-right" href="#" role="button">更多</a>
						</div>
						<div class="card  border-0" >
						  <ul class="list-group list-group-flush">
						    <li class="list-group-item"><span class="badge badge-info mr-2">1</span>
							<small>Dapibus ac facilisis inDapibus ac facilisis in</small></li>
						    <li class="list-group-item"><span class="badge badge-info mr-2">2</span>
							<small>Dapibus ac facilisis inDapibus ac facilisis in</small></li>
						    <li class="list-group-item"><span class="badge badge-info mr-2">3</span>
							<small>Vestibulum Vestibulum at eros at eros</small></li>
							<li class="list-group-item"><span class="badge badge-secondary mr-2">4</span>
							<small>Vestibulum Vestibulum at eros at eros</small></li>
							<li class="list-group-item"><span class="badge badge-secondary mr-2">5</span>
							<small>Vestibulum Vestibulum at eros at eros</small></li>
							<li class="list-group-item"><span class="badge badge-secondary mr-2">6</span>
							<small>Vestibulum Vestibulum at eros at eros</small></li>
						  </ul>
						</div>
						
					</div>
				</div>
			</div>
		</section>
		<!--美食侦探结束-->
		
		<!--引入 JavaScript文件和jQuery-->
		<!--引入顺序：jQuery，然后Popper.js，然后Bootstrap.js-->
		<script th:src="@{/js/jquery.min.js}"></script>
		<script th:src="@{/js/bootstrap.bundle.js}"></script>
		<!--引入popover.js-->
		<script th:src="@{/js/bootstrap-popover-x.js}" type="text/javascript"></script>
		
		
	</body>
</html>
